<template>
	<view class="main" @click.stop :style="{'paddingBottom':(safeAreaInsets.bottom||0)+'px'}">
		<view class="btn_box" v-if="own&&Object.keys(own).length>0&&own.ownId!==storeData.user.userId" @touchend.prevent="handleOwn">
			<img class="own" :src="own.ownInfo.avatarUrl" mode="widthFix" alt="" />
			<text class="btn_txt">管家服务</text>
		</view>
		<view class="btn_box" v-else-if="own&&Object.keys(own).length>0&&own.ownId===storeData.user.userId" @touchend.prevent="handleAdmin">
			<uni-icons type="gear" size="28" color="#fff"></uni-icons>
			<text class="btn_txt">管家管理</text>
		</view>
		<view class="btn_box" v-else @touchend.prevent="handleRegOwn">
			<img class="own" src="@/static/nicPic/m1.png" alt="" />
			<text class="btn_txt">管家注册</text>
		</view>
	
		
		<view class="input" :style="{backgroundColor:isSpeak?'#55aa00':'#fff'}">
			<view class="input-mic" @touchend="handleIsSpeak" @longpress="handleSpeak">
				<uni-icons :type="isSpeak?'compose':'mic'" size="28" color="#fff"></uni-icons>
			</view>
			<view class="input-txt-box speak" v-if="isSpeak" >
				<recordVioce @voiceMsg='voiceMsg' :customStyle='customStyle' :styleTxT='styleTxT'></recordVioce>
			
			</view>
			<view class="input-txt-box" v-else @click="handleMessage">
				<text class="input-txt">说点什么..</text>
			</view>
			<view class="input-add" @touchend.prevent="popup">
				<uni-icons type="plusempty" size="28" color="#fff"></uni-icons>
			</view>
		</view>
		<view class="btn_box" @touchend.prevent="handleToShop" style="position: relative;">
			<uni-icons type="cart" size="28" color="#fff"></uni-icons>
			<text class="btn_txt">购物</text>
			<uni-badge class="uni-badge" :text="goodCount" ></uni-badge>
		</view>
		
		<view class="btn_box" @touchend.prevent="handleMe">
			<uni-icons type="person" size="28" color="#fff"></uni-icons>
			<text class="btn_txt">我</text>
		</view>
		<uni-popup ref="popup" type="bottom">
			<view class="pop">
				<view class="title">
					<text class="title-txt">发送消息的类型</text>
				</view>
				<view class="tool-grid-container">
					<view class="tool-item" @tap.prevent="Images">
						<image src="/static/tool/pic.png" mode="aspectFit" class="tool-item-img"></image>
						<text class="tool-item-txt">发相片</text>
					</view>
					<view class="tool-item" @tap.prevent="Video">
						<image src="/static/tool/camra.png" mode="aspectFit" class="tool-item-img"></image>
						<text class="tool-item-txt">发视频</text>
					</view>
					<view class="tool-item" @tap.prevent="tosendgood">
						<image src="/static/shoping.png" mode="aspectFit" class="tool-item-img"></image>
						<text class="tool-item-txt">发商品</text>
					</view>
					<view class="tool-item" @tap.prevent="tosendshop">
						<image src="/static/tool/sendshop.png" mode="aspectFit" class="tool-item-img"></image>
						<text class="tool-item-txt">发店铺</text>
					</view>
				</view>
			</view>
		</uni-popup>
	</view>
</template>

<script>
	import { Video } from '../utils/media';
	const linliChat=uniCloud.importObject('linliChat',{ customUI:true})
	import {videoMsg,voiceMsg} from '@/methods/msgSend.js'
	import recordVioce from './recordVioce.vue';

export default {
	name: 'mainBar',
	components:{
		recordVioce
	
	},
	data() {
		return {
			isSpeak:false,
			safeAreaInsets:{bottom:0},
			customStyle:{
				
			},
			styleTxT:{
				fontSize:'28rpx',
				color:'#FFF'
			}
		};
	},
	computed:{
		goodCount(){
			return this.$store.state.cart.items.length
		},
		storeData(){
			return this.$store.state.msg
		},
		own(){
			return this.$store.state.msg.own
		}
	},

	mounted() {
	 const res=	this.storeData.systemInfo
	 this.safeAreaInsets=res
	},
	methods: {
	
		popup() {
			this.$refs.popup.open();
		},
		tosendshop() {
			uni.navigateTo({ url: '/pages/sendShop/sendShop' });
		},
		tosendgood() {
			uni.navigateTo({
				url:"/pages/draft/draft"
			})
	},
	handleToShop(){
		uni.navigateTo({
			url:'/pages/shop/shop'
		})
	},
	handleIsSpeak(){
		this.isSpeak=!this.isSpeak
	},
	handleSpeak(){
		
	},
	handleMe(){
		uni.navigateTo({
			url:'/pages/me/me'
		})
	},
	recordVioce() {
		uni.hideKeyboard();
		this.isspeeker = !this.isspeeker;
	},
	async voiceMsg(voiceData) {

		if(!voiceData){
			return
		}
		try {
			const toTarget= {
							targetType: '1',
							targetName: '公聊',
							targetId: '' 
						}
			const msg = await voiceMsg(toTarget, voiceData, this.storeData);
			console.log("55555",msg);
			this.$store.commit('msg/SET_publicMessageList', [...this.$store.state.msg.publicMessageList, msg]);
		} catch (e) {
			console.error('发送语音失败', e);
			uni.showToast({ title: '发送失败', icon: 'fail' });
		}
	},
	// 打开相册（修复：async函数需await）
	async Images() {
			uni.navigateTo({ url: '/pages/takeImages/takeImages' });
	
	},
	// 拍摄视频
	async Video() {
		try {
			const toTarget= {
							targetType: '1',
							targetName: '公聊',
							targetId: '' 
						}
			const videoRes = await Video();
			if(!videoRes.code) return
			uni.showModal({
				title:'给视频做个说明吧',
				editable:true,
				placeholderText:'请输入说明',
				success:async(res)=> {
					if(res.confirm){
						try {
							const msg = await videoMsg(toTarget, videoRes.videoPath, this.storeData, res.content);
							this.$store.commit('msg/SET_publicMessageList', [...this.$store.state.msg.publicMessageList, msg]);
						} catch (e) {
							console.error('发送视频失败', e);
							uni.showToast({ title: '发送失败', icon: 'fail' });
						}
					}
					if(res.cancel){
						try {
							const fileIDs = [videoRes?.videoPath?.fileID, videoRes?.videoPic?.fileID] || [];
							if (fileIDs.length > 0) {
								const result = await linliChat.deleFile(fileIDs);
								console.log(result);
							}
						} catch (e) {
							console.error(e);
						}
					}
				}
			})
			
		
		} catch (e) {
	
		}
	},
	handleMessage(){
		uni.navigateTo({
			url:'/pages/messages/messages'
		})
	},
	handleOwn(){
		if(this.storeData.own){
			uni.navigateTo({
			url:`/pages/PrivateChat/PrivateChat?id=${this.storeData.own.ownId}`
		})
		}else{
			uni.showToast({
				title:'该位置还没有管家',
				icon:'none',
				position:'center'
			})
		}
		
	},
	handleRegOwn(){
		uni.navigateTo({
			url:'/pages/regOwn/regOwn'
		})
	},
	handleAdmin(){
		uni.navigateTo({
						url:`/own/ownAdmin/ownAdmin?groupId=${this.own.groupId}`
					})
	}
	
	
	}
};
</script>

<style lang="scss" scoped>
	$bg-grey: #f5f5f5;
	$primary: #007aff;
	$text-light: #ccc;
	$text-dark: #333;
	$border: #eee;
	$spacing-sm: 10rpx;
	$spacing-md: 20rpx;
.main {
	position: fixed;
	left: 0;
	right: 0;
	bottom: 0;
	height: 100rpx;
	display: flex;
	justify-content: center;
	align-items: center;
	flex-direction: row;
	background-color: #7d7d7d;
}
.btn_box {
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	padding: 25rpx 25rpx;
	flex: 1;
	transition: transform 0.1s ease; /* 增加过渡动画，使缩放更平滑 */
	transform-origin: center; /* 确保从中心缩放 */
	transform: scale(1);
	&:active {
		transform: scale(0.5) !important;
		color: #55aaff;
	}
}

.own {
	width: 50rpx;
	height: 50rpx;
	border-radius: 5rpx;
}
.uni-badge {
 position: absolute;
 z-index: 999;
 top:10;
 right:20;
 
}

.input {
	width: 300rpx;
	border-radius: 30rpx;
	height: 60rpx;

	background-color: #fff;

	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: space-around;
}
.input-txt-box {
	flex: 1;
	padding: 0rpx 5rpx;
}
.input-txt {
	font-size: 26rpx;
	color: #ccc;
	flex: 1;
}
.speak{
align-items: center;
justify-content: center;
	animation: slideUp 0.3s ease-out forwards;
}
.speak-txt{
	font-size: 24rpx;
	color: #fff;
}
.input-mic {
	width: 60rpx;
	height: 60rpx;
	display: flex;
	flex-direction: row;
	justify-content: center;
	align-items: center;
	border-radius: 30rpx;

	background-color: green;
}
.input-add {
	width: 60rpx;
	height: 60rpx;
	display: flex;
	flex-direction: row;
	justify-content: center;
	align-items: center;
	border-radius: 30rpx;
	background-color: #55aaff;
}
.btn_txt {
	font-size: 24rpx;
	color: #fff;
}
.pop {
	width: 750rpx;
	border-top-right-radius: 20rpx;
	border-top-left-radius: 20rpx;
}
.title{
	display: flex;
	justify-content: center;
	height: 50rpx;
	padding: 20rpx 0;
	border-top-right-radius: 30rpx;
	border-top-left-radius: 30rpx;
	background-color: #7eccff;
}
.title-txt{
	font-size: 30rpx;
	text-align: center;
	}
.tool-grid-container {
	display: flex;
	flex-direction: row;

	gap: 20rpx;
	padding: $spacing-md;
	background-color: #fff;
}
.tool-item {
	display: flex;
	flex: 1;
	margin: 20rpx 20rpx;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	font-size: 25rpx;
	color: $primary;
	padding: $spacing-sm;
	border: 1px solid $border;
	border-radius: 20rpx;
	box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.05);
	background-color: $bg-grey;
	gap: $spacing-sm;
	&:active {
		background-color: #eee; // 点击反馈
	}
}
.tool-item-img {
	width: 65rpx;
	height: 65rpx;
}
.tool-item-txt {
	font-size: 28rpx;
	text-align: center;
}
</style>
